import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Popconfirm,
  Row,
  Col,
  Modal,
  Collapse,
  message,
  List,
  Radio,
} from 'antd';

import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import ImageUploader from '../../../components/Falcon/Attachment/ImageUploader';
import ApplyOrderDisplayer from '../../../components/Falcon/ApplyOrderDisplayer';
import querystring from 'querystring';
import styles from './style.less';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const Option = Select.Option;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ risk, apply }) => ({
  risk,
  apply,
}))
@Form.create()
export default class OperateDetail extends PureComponent {
  state = {
    projectId: '',
    taskId: '',
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    this.setState({
      projectId: params.id,
      taskId: params.taskId,
    });
    dispatch({
      type: 'apply/fetchApplyOperateDetail',
      payload: {
        projectId: params.id,
      },
    });
  }

  handleBusinessPerform = code => {
    const { dispatch } = this.props;
    dispatch({
      type: 'apply/businessPerform',
      payload: {
        projectId: this.state.projectId,
        taskId: this.state.taskId,
        resultCode: code,
      },
      callback: () => {
        const { apply: { applyResult } } = this.props;
        if (applyResult.code == 200) {
          message.success('执行成功');
          dispatch(routerRedux.push(`/apply/operateList`));
        } else {
          message.error(applyResult.message);
        }
      },
    });
  };

  handleBusinessStart = () => {
    const code = 1;
    this.handleBusinessPerform(code);
  };

  handleBusinessStop = () => {
    const code = 3;
    this.handleBusinessPerform(code);
  };

  handleStopConfim = () => {
    const code = 3;
    this.handleBusinessPerform(code);
  };

  submitButton = (
    <Button type="primary" onClick={this.handleBusinessStart}>
      开始执行
    </Button>
  );
  terminateButton = (
    <Popconfirm
      title="确定要终止吗"
      onConfirm={this.handleStopConfim}
      okText="确定"
      cancelText="取消"
    >
      <Button type="danger">终止</Button>
    </Popconfirm>
  );
  // subspendButton = <Button>挂起</Button>;
  buttonList = [this.submitButton, this.terminateButton]; //this.subspendButton

  render() {
    const { risk } = this.props;
    const { apply: { operateDetail, applyLoading } } = this.props;
    const { getFieldDecorator } = this.props.form;

    return (
      <PageHeaderLayout title="业务受理">
        {/* {JSON.stringify(operateDetail)} */}
        {operateDetail.customer && (
          <Card
            title="业务受理"
            loading={applyLoading}
            extra={
              <Button>
                <Link to={`/apply/fillApply?id=${this.state.projectId}&applyDisabled=${1}`}>
                  查看详情
                </Link>
              </Button>
            }
            actions={this.buttonList}
          >
            <FormItem label="客户姓名" {...formItemLayout}>
              {operateDetail.customer && operateDetail.customer.custName}
            </FormItem>
            <FormItem label="身份证号" {...formItemLayout}>
              {operateDetail.customer && operateDetail.customer.idcard}
            </FormItem>
            <FormItem label="初筛意见" {...formItemLayout}>
              {operateDetail.approval && operateDetail.approval.result}
            </FormItem>
            <FormItem label="意见说明" {...formItemLayout}>
              {/* {getFieldDecorator('content', {
                initialValue: operateDetail.approval && operateDetail.approval.content,
                rules: [{ required: true, message: '请输入意见说明' }]
              })( */}
              {operateDetail.approval && operateDetail.approval.content}
              {/* <TextArea
                rows={4}
                // placeholder="请输入意见说明"
                style={{ width: '60%' }}
              /> */}
              {/* )} */}
            </FormItem>
            <FormItem
              wrapperCol={{
                xs: { span: 24, offset: 0 },
                sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
              }}
              label=""
            />
          </Card>
        )}
      </PageHeaderLayout>
    );
  }
}
